<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: gaoluo
 * @Date: 2021-09-03 16:34:14
 * @LastEditors: gaoluo
 * @LastEditTime: 2021-10-18 14:05:14
 * @FilePath: /nhw/src/components/MySearch/index.vue
-->
<template>
  <form action="/">
    <Search
      class="search-container"
      v-model="searchKey"
      :placeholder="placeholder"
      show-action
      background="#e1e1e1"
      :action-text="actionText"
      @search="onSearch"
      @cancel="onCancel"
    />
  </form>
</template>

<script>
import { Search } from "vant";
export default {
  name: "MySearch",

  components: {
    Search,
  },
  props: {
    placeholder: {
      type: String,
      default: "请输入搜索关键词",
    },
    mark: {
      //组件标识，一个页面中有多个search时，可以用mark标记
      type: [String, Number],
      default: "",
    },
    actionText: {
      type: String,
      default: "取消",
    },
  },
  data() {
    return {
      searchKey: "",
    };
  },

  mounted() {},

  methods: {
    onSearch(value) {
      this.$emit("search", { mark: this.mark, key: value });
    },
    onCancel() {
      this.$emit("cancel", { mark: this.mark });
    },
  },
};
</script>

<style lang="less" scoped>
@import url("~style/var.less");
.van-search {
  height: 98px;
  box-sizing: border-box;

  /deep/ .van-icon {
    color: #b2b2b2;
    font-size: 34px;
  }
  /deep/ .van-search__content {
    border-radius: 12px;
  }

  /deep/ .van-field__control,
  .van-search__action {
    color: @gray;
    font-size: 26px;
  }
}
</style>